
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>订单详情</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
        <style>
            body{
                font-size: 14px;
            }
            .sharePicker{
                position: fixed;
                bottom: 0;
                -webkit-transform: translateY(160px);
                height: 160px;
                overflow-y:auto; 
                -webkit-transition:  .5s;
                transition:  .5s;
                z-index: 9999;
                text-align: center;
                width: 100%;
            }
            header.aui-bar-nav{
                position: fixed !important;
            }

            .pickAnimate{
                -webkit-transform: translateY(00px);
            }
            .pickAnimate li:last-of-type{
                background: #f5f5f5;
            }
            .aui-icon-share{
                color: #ff3333 !important;
            }
            .weixin{
                display: inline-block;
            }
            .weixin img{
                width: 80px;
            }
            .orderListUl{
                display: table;
                width: 100%;
                text-align: center;
            }
            .orderListUl li{
                line-height: 35px;
                height: 35px;
            }
            .orderListUl li:nth-of-type(odd){
                background: #f8fdff;
            }
            .orderListUl li:first-of-type{
                background: #fff;
            }
            .orderListUl li.th{
                
            }
            .orderListLi{
                display:table-row;
            }
            .orderListLi span{
                display: table-cell;
                overflow: hidden;
            }

            .orderListLi span:nth-of-type(2){
                max-width: 120px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .contain{
                background: #fff;
                margin-top: 45px;
                margin-bottom: 110px;
            }
            .mui-numbox{
                width: 80px;
                height: 25px;
                padding: 0 20px;
            }
            .mui-numbox .mui-btn{
                width: 20px;
            }
            .mui-numbox  .mui-input-numbox{
                position: absolute;
                width: 40px !important;
                top: 0;
                left: 20px;
            }
            .th span{
                position: relative;
            }
            .th span:before{
                content:"";
                position: absolute;
                -webkit-transform: scale(0.5);
                border-bottom: 1px solid #c8c7cc;
                bottom: 0;
                left: -100%;
                right: -100%;
            }
            .orderPay p{
                margin: 0;
                color: #000;
            }
            .aui-nav{
                height: 104px;
            }
            .orderPay{
                float: left;
                padding: 10px 0 10px 10px;
            }
            .pay{
                width: 25%;
                height: 104px;
                line-height: 104px;
                float: right;
                /*display: none;*/
            }
            .pickAnimate ul{
                margin: 0;
            }
        </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="aui-title">
                订单详情
            </div>
            <i class="aui-iconfont aui-icon-share aui-pull-right" tapmode onclick="share()"></i>
        </header>
        <div class="contain">
            <ul class="orderListUl">
                <li class="orderListLi th ">
                    <span>名称</span>
                    <span>规格</span>
                    <span>单位</span>
                    <span>单价</span>
                    <span>数量</span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span  class="aui-ellipsis-2">小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span>小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span>小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span>小挂锁</span>
                    <span>40MM金色</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='5' data-numbox-max='5'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="5" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
                <li class="orderListLi ">
                    <span>小挂锁</span>
                    <span>40MM金色0</span>
                    <span>把</span>
                    <span>￥20</span>
                    <span>
                       <div class="mui-numbox " data-numbox-min='15' data-numbox-max='15'>
                           <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                           <input  class="mui-input-numbox goodNum" type="number" value="15" />
                           <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                       </div>
                    </span>
                </li>
            </ul>
        </div>
        <footer class="aui-nav" id="aui-footer">
            <div class="orderPay">
                <p>在线支付（先款后货）</p>
                <p>商品总价：￥5001.80</p>
                <p>运费：￥10.00</p>
                <p>商品总价：￥5011.80</p>
            </div>
            <div class="pay myBtn" tapmode onclick="openToTwo('orderWait')">
                <!--不同状态 控制这个显示隐藏 -->
                立即下单
            </div>
        </footer>

        <!-- 弹出分享 -->
        <div class="sharePicker">
             <ul class="aui-list-view setOffer">
                 <li class="aui-list-view-cell" >
                    <div class="weixin" tapmode onclick="shareWeChat()">
                     <img src="../../image/weixin.png">
                        <p>分享到微信</p>
                     </div>
                    <div class="weixin">
                     <img src="../../image/QQ.png" tapmode onclick="shareQQ()">
                        <p>分享到QQ</p>
                     </div>
                 </li>
                 <li class="aui-list-view-cell "  tapmode onclick="hidePicker()">
                     取消
                 </li>
             </ul>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script>
    <script type="text/javascript" src="../../script/index.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            var mobile = api.pageParam.mobile;
        }
        // mui遮罩
        var mask = mui.createMask(hidePicker);

        // 关闭遮罩
        function hidePicker(){
            removeBodyLayer();
            $(".sharePicker").removeClass("pickAnimate");
            mask.myclose();
        }
        //弹出分享
        function share(){
            mask.show();
            setBodyLayer();
            $(".sharePicker").addClass("pickAnimate");
        }
        //QQ分享
        function shareQQ(){
            var qq = api.require('QQPlus');
            qq.installed(function(retInstall, errInstall) {
                if (retInstall.status) {//已安装，就登陆
                    qq.login(function(retLogin, errLogin) {
                        if(retLogin.status){//登录成功
                            qq.shareNews({
                                url: 'http://sports.sina.com.cn/',
                                title: '新闻分享测试',
                                description: '新闻描述测试',
                                imgUrl: 'http://k.sinaimg.cn/n/sports/transform/20161125/bn4r-fxyawmm3366300.jpg/w570b3a.jpg'
                            },function(retShare,errShare){
                                if (retShare.status){
                                    alert("分享成功！");
                                } else {
                                    if(errShare.msg=="cancel"){
                                        api.toast({
                                            msg:"已取消分享"
                                        })
                                    }
                                }
                            });
                        }else{//登录失败
                            api.toast({
                                msg:"QQ登录失败"
                            })
                        }
                    })
                } else {
                    api.toast({
                        msg:"您还没没有安装QQ"
                    })
                }
            });
            hidePicker();
        }
        //微信分享
        function shareWeChat(){
            var wx = api.require('wx');
            wx.isInstalled(function(retInstall, errInstall) {
                if (retInstall.installed) {//已安装，就登陆
                    wx.shareWebpage({
                        apiKey: '',
                        scene: 'timeline',
                        title: '测试标题',
                        description: '分享内容的描述',
                        thumb: 'widget://a.jpg',
                        contentUrl: 'http://sports.sina.com.cn/'
                    }, function(ret, errShare) {
                        if (ret.status) {
                            api.toast({
                                msg:"分享成功"
                            })
                        } else {
                            var message;
                            switch(errShare.code){
                                case -1:
                                    message="未知错误";
                                    break;
                                case 1:
                                    message="未知错误";
                                    break;
                                case 2:
                                    message="您已取消分享";
                                    break;
                                case 3:
                                    message="分享失败，请稍后重试";
                                    break;
                                case 4:
                                    message="暂时还未授权，请联系管理员";
                                    break;
                                case 5:
                                    message="服务暂不支持";
                                    break;
                            }
                            api.toast({
                                msg:message
                            })
                        }
                    });
                } else {
                    api.toast({
                        msg:"您还没没有安装微信"
                    })
                }
            });
            hidePicker();
        }
    </script>
</html>
